const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    devtool: "eval-source-map",
  entry: __dirname + "/app/main.js",   //入口文件
    output: {
      path: __dirname + "/dist",    //打包后的文件存放的地方
        filename: 'bundle.js'     //打包后输出的文件名
    },

  devServer: {
      contentBase: "./public", //本地服务器加载页面所在目录
      historyApiFallback: true,   //是否跳转  true不跳转  开发单页面应用很有用，   设置为true时， 所有的跳转指向index.html
      inline: true   //是否热更新
  },
    module: {
        rules: [
            {
                test: /(\.jsx|\.js)$/,    //以匹配loaders所处理文件的拓展名的正则表达式，此时webpack配置已经允许使用es6以及jsx语法
                use: {
                    loader: "babel-loader",  //loader的名称
                    // options: {
                    //     presets: [    //选项放入.babelrc   webpack会自动调用.babelrc中的babel配置选项
                    //         "env", "react"
                    //     ]
                    // }
                },
                exclude: /node_modules/  //手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）
            },
            {
                test: /\.css$/,
                use: [
                    {loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,   //指定启用css modules
                            localIdentName: '[name]__[local]--[hash:base64:5]'   //指定css的类名格式不造成组件间污染
                        }
                    }
                ]
            },
            {
                test: /\.json$/,   //支持导入JSON文件
                type: 'javascript/auto',    //webpack4用了json-loader也一直报json错， 加上这个就好了
                    loader: "json-loader",
                exclude: /node_modules/  //手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),   //打包后js文件中会有该注释
        new HtmlWebpackPlugin({
            template: __dirname + "/public/index.html"
        })
    ]
};

//配置该文件  打包只需使用webpack命令进行打包   会根据该文件配置